<template>
  <el-button
    :type="btnType"
    :size="size"
    :disabled="disabled"
    :plain="plain"
    :icon="icon"
    :loading="loading"
    :round="round"
    :circle="circle"
    :autofocus="autofocus"
    :native-type="nativeType"
    @click="handlClick"
  >
    <slot>保存</slot>
  </el-button>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({
  name: 'MButton'
})
export default class extends Vue {
  @Prop({ default: '' }) private type?:string // 类型
  @Prop({ default: '' }) private size?:string // 尺寸
  @Prop({ default: '' }) private icon?:string // 图标
  @Prop({ default: '' }) private nativeType?:string //
  @Prop({ default: false }) private disabled?:boolean // 禁用
  @Prop({ default: false }) private plain?:boolean // 是否朴素按钮
  @Prop({ default: false }) private loading?:boolean //  loading
  @Prop({ default: false }) private round?:boolean //
  @Prop({ default: false }) private circle?:boolean //
  @Prop({ default: false }) private autofocus?:boolean //

  get btnType() {
    return this.type || 'primary'
  }

  handlClick() {
    this.$emit('click')
  }
}
</script>
